<template>
  <div>
    <HeaderSelector></HeaderSelector>

    <h1 class="title">热门收藏夹</h1>
    <div class="maincontent">

      <el-row>
        <el-col :span="12">
          <el-card class="box-card" v-for="collection in collections">
            <i class="el-icon-user"></i> {{ collection.username }}
            <br>
            <i class="el-icon-chat-line-square" v-if="collection.description!=''"></i> {{ collection.description }}

            <el-card class="card" v-for="blog in collection.blogs" shadow="hover" @click.native="toDetail(blog.id)">
              <div>
                {{ blog.title }}
              </div>
            </el-card>
            <br>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <h4>今日点赞排行榜</h4>
            <el-card class="card" v-for="blog in goodblogs" shadow="hover" @click.native="toDetail(blog.id)">
              <p>{{ blog.title }}</p>
              <i class="el-icon-thumb"> {{blog.likeCount}}</i>
            </el-card>
          </el-card>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script>
import HeaderSelector from "../components/HeaderSelector";

export default {
  inject: ["reload"],
  name: "HotFavorites",
  components: {HeaderSelector},

  data() {
    return {
      collections: [],

      goodblogs: []
    }
  },

  methods: {
    toDetail(bid) {
      this.$router.push({name: 'BlogDetail', params: {blogId: bid}})
      this.reload()
    }
  },

  created() {
    this.$axios.get("/getHotCollections").then(res => {
      this.collections = res.data.data
    })

    this.$axios.get('/getMostLikeTodayBlog').then(res => {
      this.goodblogs = res.data.data
    })
  }
}
</script>

<style scoped>

.maincontent {
  position: relative;
  top: 50px;
  margin: auto;
  width: 80%;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin: auto;
  margin-bottom: 20px;
  width: 480px;
}


.card {
  position: relative;
  top: 10px;
  margin: auto;
  margin-bottom: 10px;
  background-color: rgba(222, 237, 252, 0.27);
}

.title {
  position: relative;
  top: 50px;
  color: #409EFF;
}

h4 {
  text-align: center;
  color: #409EFF;
}

p {
  font-weight: bold;
}


</style>